<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    	<style>
    		.itembox{opacity:1!important;}
    	</style>
    <![endif]-->
    <link rel="stylesheet" href="/resources/css/postModal.css?20150424">
	<link rel="stylesheet" href="/resources/css/postbox-viewer.css?20141204">
	<style>
		body{ background-color: #eee; }
		.hashtag-item{ width: 280px; margin-bottom: 5px; float:left; background-color: #000; }
		.hashtag-item a { display: block; position: relative;  }
		.hashtag-item img { width: 100%; border:0; opacity: .75; -webkit-transition:opacity 0.2s ease-in-out;
			-moz-transition:opacity 0.2s ease-in-out;
			-o-transition:opacity 0.2s ease-in-out;
			transition:opacity 0.2s ease-in-out; }
		.hashtag-item img:hover { opacity:1; }
		.hashtag-item .name { position: absolute; padding: 6px 12px; /* background-color: rgba(0, 0, 0, 0.50); */ color: #fff; bottom: 15px; left: 15px; font-size: 15px; border: 2px solid rgba(255, 255, 255, 0.65); }
		#error-message{
			display: none;
			margin: 0 auto;
			text-align: center;
		}
		.tooltip.top {
		    margin-top: 50px!important;
		}
		.tab-wrap{
			width: 100%;
			height: 50px;
			margin-bottom: 30px;
		}
		.tab-wrap ul{
			float: right;
			list-style: none;
			padding-left: 0;
			margin-left: 6px;
		}
		.tab-wrap ul > li{
			display: inline-block;
			width: 80px;
			padding: 10px 0;
			border: 1px solid #dfdfdf;
			background-color: #fff;
			text-align: center;
			margin-left: -6px;
			cursor: pointer;
		}
		.tab-wrap ul > li:hover{
			background-color: #696969;
			color: #fff;
		}
		.tab-wrap ul > li.active{
			background-color: #696969;
			color: #fff;
		}
		#hotList{
			margin: 0 auto;
			opacity: 0;
			-webkit-transition:opacity 0.5s ease-in-out;
			-moz-transition:opacity 0.5s ease-in-out;
			-o-transition:opacity 0.5s ease-in-out;
			transition:opacity 0.5s ease-in-out;
		}
		#lastList{
			margin: 0 auto!important;
			opacity: 0;
			-webkit-transition:opacity 0.5s ease-in-out;
			-moz-transition:opacity 0.5s ease-in-out;
			-o-transition:opacity 0.5s ease-in-out;
			transition:opacity 0.5s ease-in-out;
		}
		@media screen and (max-width: 768px){ 
			.hashtag-item{ width:48%; }
			.tab-wrap ul { width: 100%; float: none; }
			.tab-wrap ul > li { width: 50%; }
		}
	</style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<!-- content -->
<div style="margin-top:25px;padding:0 15px;width:100%;">
	
	<div id="hotList">
		<div class="tab-wrap">
			<ul>
				<li class="active" onclick="orderTab(this, 'hot')">인기</li>
				<li onclick="orderTab(this, 'latest')">최신</li>
			</ul>
		</div>
	</div>
	<div id="lastList">
		<div class="tab-wrap">
			<ul>
				<li onclick="orderTab(this, 'hot')">인기</li>
				<li class="active" onclick="orderTab(this, 'latest')">최신</li>
			</ul>
		</div>
	</div>
	<div id="error-message">
		<p><i class="glyphicon glyphicon-remove" style="font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);"></i>
		<h5>서버문제로 게시글을 불러올 수 없습니다</h5>
		<button onclick="location.reload(true)" class="btn btn-default btn-sm">다시시도</button>
	</div>
</div>

<%@ include file="commonScript.jsp" %>
</div>
</div><!-- end viewport -->
<script src="/resources/js/modernizr.custom.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.pkgd.min.js"></script>
<script src="/resources/js/classie.js"></script>
<script src="/resources/js/AnimOnScroll.js"></script>
<script type="text/javascript">
	var is_mobile = isMobile();
	var order = "hot";
	var reload = true;
	
	window.onload = function() {
		loadHashtag();
   	};
   	
   	function orderTab(el, type){
   		order = type;
   		if(type == "hot"){
   			$("#lastList").hide();
   			$("#hotList").show();
   			if($("#hotList").is(":empty")){
   				loadHashtag();
   			}
   		}else{
   			$("#hotList").hide();
   			$("#lastList").show();
   			if(reload){
   				loadHashtag();
   				reload = false;
   			}
   		}
   	}
	
   	/* roading post */
   	function loadHashtag(){
   		$.ajax({
   			type : "post"
		    , url : "/getHashTagList?order="+order
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(request,status,error) {
		    	$("#error-message").show();
		    }
		    , success : function(response) {
		    	if(response == ""){
		    		return false;
		    	}else{
		    		var html = "";
		    		for(var i=0;i<response.length;i++){
		    			html += "<div class='hashtag-item'><a href='/hashtag/"+response[i].name+"' target='_blank' title='#"+response[i].name+" "+response[i].cnt+"개' data-toggle='tooltip'><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'><span class='name'>#"+response[i].name+"</span></a></div>";
		    		}
		    		if(order == "hot"){
		    			$("#hotList").append(html);
			    		var $itemList = $("#hotList");
			    		imagesLoaded($itemList, function() {
			    			$itemList.masonry({
		                		"itemSelector" : ".hashtag-item",
		                		"gutter": 5,
		                		"isFitWidth" : true,
		                		"stamp" : ".tab-wrap"
		                	});
			    			$itemList.css("opacity", "1");
		           		});
		    		}else{
		    			$("#lastList").append(html);
			    		var $itemList = $("#lastList");
			    		imagesLoaded($itemList, function() {
			    			$itemList.masonry({
			    				"itemSelector" : ".hashtag-item",
		                		"gutter": 5,
		                		"isFitWidth" : true,
		                		"stamp" : ".tab-wrap"
		                	});
			    			$itemList.css("opacity", "1");
		           		});
		    		}
		    		$('[data-toggle="tooltip"]').tooltip({
		                'placement': 'top',
		                'container': 'body',
		                'trigger': "hover"
		            });
		    	}
		    }
		    , beforeSend: function() {
		    	$("#ajax-spinner").show();
		    }
		    , complete: function() {
		    	$("#ajax-spinner").hide();
		    }
		});
   	}
</script>
</body>
</html>